/** @jsxImportSource @emotion/react */
import * as React from "react";
import {
  CCell, Cell,
  Embed, RCell, Table, TableBody, TableRow, Text,
} from "customize-easy-ui-component";
import {FadeImage} from "../../comp/FadeImage";
import Img_Ma from "../../images/MA.png";
import Img_Fbpi from "../../images/FBPI.png";
import Img_ReportNoQR from "../../images/reportNoQR.png";
import {AttentionPoint} from "../common/rarelyVary";
import {DirectLink} from "../../routing/Link";
import {RepLink} from "../common/base";

/**报告封面的头部区域： 紧凑型
 * */
export const ReportFirstPageHeadnMbbm= ({theme , rep, mbbm } :{theme: any, rep:any, mbbm:string}
) => {
  // const atPrint = useMedia('print');
  return <React.Fragment>
    <div css={{
      display: 'flex',
      justifyContent: 'space-between',
      textAlign: 'center',
      height: '11rem',
    }}>
      <div css={{overflow: 'hidden'}}>
        <Embed css={{width: "155px", margin: "auto", top: '-0.65rem'}} width={78} height={35}>
          <FadeImage src={Img_Ma}/>
        </Embed>
        <Text css={{position: 'relative', top: '-1.1rem', fontSize: '0.9rem'}}>181320110160</Text>
      </div>
      <div>
        <Embed css={{width: "140px", margin: "auto"}} width={10} height={10}>
          <FadeImage src={Img_ReportNoQR}/>
        </Embed>
      </div>
      <div css={{overflow: 'hidden', display: 'flex', flexDirection: 'column'}}>
        {/*<Text variant="h6" css={{fontSize: '0.8rem'}}>{mbbm}</Text>*/}
        <Embed css={{width: "120px", margin: "auto", top: '-0.65rem'}} width={78} height={35}>
          <FadeImage src={Img_Fbpi}/>
        </Embed>
        <div css={{
          display: 'flex',
          "@media (min-width:690px),print and (min-width:538px)": {
            marginRight: "1rem"
          }
        }}
        ><Text variant="h5">报告编号：</Text>
          <Text variant="h5" css={{textDecoration: 'underline'}}>{rep?.isp?.no}</Text>
        </div>
      </div>
    </div>
  </React.Fragment>;
};


/**管道的 封面概要；
 * */
export const 首页设备概况MVS= ({theme, orc, rep } :{theme: any, orc:any, rep:any}
) => {
  return <Table fixed={ ["20%","%"] }  css={ {borderCollapse: 'collapse'} }>
    <TableBody rheight={40}>
      <TableRow>
        <RCell css={{border:'none'}}>使用单位：</RCell>
        <CCell css={{border:'none',borderBottom:`1px dashed`}}>{orc.使用单位 || '／'}</CCell>
      </TableRow>
      <TableRow>
        <RCell css={{border:'none'}}>容器名称：</RCell>
        <CCell css={{border:'none',borderBottom:`1px dashed`}}>{orc.title || '／'}</CCell>
      </TableRow>
      <TableRow >
        <RCell css={{border:'none'}}>单位内编号：</RCell>
        <CCell css={{border:'none',borderBottom:`1px dashed`}}>{orc.单位内部编号 || '／'}</CCell>
      </TableRow>
      <TableRow >
        <RCell css={{border:'none'}}>使用证号：</RCell>
        <CCell css={{border:'none',borderBottom:`1px dashed`}}>{orc?.使用证号 || '／'}</CCell>
      </TableRow>
      <TableRow >
        <RCell css={{border:'none'}}>罐车牌号：</RCell>
        <CCell css={{border:'none',borderBottom:`1px dashed`}}>{orc.上路号牌 || '／'}</CCell>
      </TableRow>
      <TableRow>
        <RCell css={{border:'none'}}>检验日期：</RCell>
        {orc.检验日期1? <CCell css={{border:'none',borderBottom:`1px dashed`}}>{orc.检验日期1} 至 {orc.检验日期}</CCell>
            :
            <CCell css={{border:'none',borderBottom:`1px dashed`}}>{orc.检验日期}</CCell>
        }
      </TableRow>
      <TableRow>
        <RCell css={{border:'none'}}>监察识别码：</RCell>
        <CCell css={{border:'none',borderBottom:`1px dashed`}}>{orc.监察识别码 || '／'}</CCell>
      </TableRow>
    </TableBody>
  </Table>;
};


export const 注意事项MVS= ({comply, rep} :{comply: any, rep: any}
) => {
  //中间组件只带了第一行的内容 1．本报告{comply}。<br/>  参数telurl：是否显示报检方式；最后一行跟随的！
  return <AttentionPoint rep={rep} comply={comply} telurl >
    2．本报告应当由计算机打印输出，或者用钢笔、签字笔填写，字迹应当工整，修改无效。<br/>
    3．本报告无检验、编制、审核、批准人员签字和检验机构的核准证号、检验专用章或者公章无效。<br/>
    4．本报告书一式二份，由检验单位和使用单位分别保存。<br/>
    5．受检单位对本报告结论如有异议，请在收到报告书之日起15日内，向检验机构提出书面意见。<br/>
    6．根据《中华人民共和国特种设备安全法》，使用单位应于检验合格有效期届满前1个月向检验机构提出定期检验申请。<br/>
    7．有关检验检测数据未经允许，施工、使用单位不得擅自向社会发布信息。<br/>
    8．
  </AttentionPoint>;
};

/**管道的 目录；
 * @property suffix:  自动加“报告”
 * */
export const 目录页VS= ({theme, orc, rep, suffix} :{theme: any, orc:any, rep:any, suffix?:boolean}
) => {
  let muluSn=1;       //目录显示项目序号
  return <>
    <div id='ProjectList' css={{
      "@media print": {
        pageBreakBefore: 'always',
      },
    }}>
      <RepLink rep={rep} tag={'Entrance'}>
        <Text variant="h2" css={{
          textAlign: 'center',
          "@media print": {
            // pageBreakBefore: 'always',
          },
        }}>目录</Text>
      </RepLink>
    </div>
    {/*【特别注意】底下的calc(100vh - 3rem)若超出一张纸高度,可导致尾随空白页*/}
    <div css={{
      "@media print": {
        //【特殊】布局流如何定位到中间某一张纸张的末尾打印；纸张高度上 剪掉 上面的一行 “目录” 并没有被本div所都囊括的元素高度：推定剪掉高度是2rem。A4纸张竖版大约可接受高度大小=775pt再换算=273.4mm；A4纸297mm-2*(11.7=边距+页眉页脚)；
        //【有问题】目标div必须小于一张纸高度？这里若稍微超出了当前定位纸张区域，@@就可能被切分两页的！！，变成后续尾随空白页面的。所以尽量考虑有余量“- 10pt”:A4纸张竖版。
        height: `calc(100vh - 3rem)`,
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'center',   //'flex-end', 吸附本页纸张的底部区域打印，还是在本张纸张中间打印的？
      },
    }}>
      <div css={{
        display: 'flex',
        justifyContent: 'flex-end',
      }}>
        <Text css={{
          [theme.mediaQueries.md]: {
            marginRight: '2rem',
          }
        }}>报告编号：{rep.isp.no}
        </Text>
      </div>
      <Table fixed={["7%", "%", "11%", "18%"]} css={{borderCollapse: 'collapse', height: `80pt`,}}  tight  miniw={800}>
        <TableBody>
          <DirectLink  href={`/report/${rep?.modeltype}/ver/${rep?.modelversion}/${rep?.id}/ProjectList#ProjectList`}>
            <TableRow>
              <CCell component="th" scope="row">序号</CCell>
              <CCell>项目</CCell>
              <CCell>页号</CCell><CCell>附页、附图</CCell>
            </TableRow>
          </DirectLink>
          {orc?.Projects?.map((prj: any, i: number) => {
            if(prj?.na || prj?.om)   return null;       //na:表示不在目录中显示的分项目分页。 om：只在记录显示；
            if(prj?.zs || prj?.dd) return null;       //特性表跟着zs证书走到前面去的，不用显示在目录；dd表示用户自定义项目不显示在目录中
            return prj?.do && (
                 <DirectLink key={i} href={`/report/${rep?.modeltype}/ver/${rep?.modelversion}/${rep?.id}/ProjectList?from=${i}#ProjectList`}>
                  <TableRow>
                    <CCell component="th" scope="row">{muluSn++}</CCell>
                    <Cell>{prj?.ml ? prj?.ml : suffix? (prj?.name + '报告') : prj?.name}</Cell>
                    <CCell>{prj?.page}</CCell>
                    <CCell>{prj?.apx??'／'}</CCell>
                  </TableRow>
                </DirectLink>
            );
          })
          }
          { !(orc?.Projects?.length>0) &&
              <DirectLink  href={`/report/${rep?.modeltype}/ver/${rep?.modelversion}/${rep?.id}/ProjectList#ProjectList`}>
                <TableRow>
                  <CCell colSpan={4}>还未初始化！<br/>空目录表</CCell>
                </TableRow>
             </DirectLink>
          }
        </TableBody>
      </Table>
    </div>
  </>;
};

